<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryRef" size="large" :inline="true" v-show="showSearch" label-width="100px">
        <el-form-item label="类型" prop="noteType">
          <el-select style="width: 200px;" v-model="queryParams.noteType" placeholder="请选择类型" clearable>
            <el-option v-for="dict in note_type_all" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="收款/付款公司" prop="noteType">
          <el-select style="width: 200px;" v-model="queryParams.companyName" placeholder="请选择公司" clearable>
            <el-option v-for="dict in company_select" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="到期时间" style="width: 308px">
        <el-date-picker v-model="daterangeAcceptTime" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
          start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
      </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>


      <el-row :gutter="16">
        <el-col :span="8">
            <div class="statistic-card">
                <el-statistic :value="dataSize" >
                    <template #title>
                        <div style="display: inline-flex; align-items: center;font-size: 16px;">
                            数量
                        </div>
                    </template>
                </el-statistic>
            </div>
        </el-col>
        <el-col :span="8">
            <div class="statistic-card">
                <el-statistic :value="totalMoney" :formatter="(value) => value.toFixed(2)">
                    <template #title>
                        <div style="display: inline-flex; align-items: center;font-size: 16px;">
                            总金额￥
                        </div>
                    </template>
                </el-statistic>
            </div>
        </el-col>
    </el-row>
  
  
      <el-table v-loading="loading" height="70vh" :summary-method="getSummaries" border show-summary :data="promissoryList" >
        <el-table-column label="出票日期" align="center" prop="outDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.outDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
  
        <el-table-column label="到期日期" align="center" prop="endDate" width="180">
          <template #default="scope">
            <span>{{ parseTime(scope.row.endDate, '{y}-{m}-{d}') }}</span>
          </template>
        </el-table-column>
  
  
        <el-table-column label="操作类型" align="center" prop="noteType">
          <template #default="scope">
            <dict-tag :options="note_type_all" :value="scope.row.noteType" />
          </template>
        </el-table-column>
        <el-table-column label="付款单位" align="center" prop="payer" />
        <el-table-column label="收款单位" align="center" prop="payee" />
        <el-table-column label="金额" align="center"  width="120" prop="money" />
        <el-table-column label="管家婆项目" width="250" show-overflow-tooltip align="center" prop="housekeeperName" />
        <el-table-column label="操作人" align="center" prop="drawer" />
        <el-table-column label="票据单号" align="center" prop="ticketNumber" />
        <el-table-column label="到期时间" align="center" prop="endDate" />
        <el-table-column label="备注" align="center" prop="remark" />
      </el-table>
  
    </div>
  </template>
  
  <script setup name="Promissory">
  import { listPromissory,listPromissoryData, getPromissory, delPromissory, addPromissory, updatePromissory } from "@/api/project/promissory";
  import { listCompany } from "@/api/project/project";
  const { proxy } = getCurrentInstance();
  const { note_type_all } = proxy.useDict('note_type_all');
  const { company_select } = proxy.useDict('company_select');
  
  const promissoryList = ref([]);
  const dataSize = ref(0)
  const totalMoney = ref(0)
  const open = ref(false);
  const openData = ref(false);
  const loading = ref(true);
  const showSearch = ref(true);
  const ids = ref([]);
  const single = ref(true);
  const multiple = ref(true);
  const total = ref(0);
  const title = ref("");
  const companyList = ref([]);
  const loadingQuery = ref(false)
  const daterangeAcceptTime = ref([]);
  const data = reactive({
    form: {},
    queryParams: {
      pageNum: 1,
      pageSize: 10,
      outDate: null,
      endDate: null,
      payee: null,
      payer: null,
      money: null,
      housekeeperProject: null,
      housekeeperName: null,
      drawer: null,
      drawerId: null,
      ticketNumber: null,
      companyName: null,
      noteType: null,
      noteName: null
    },
  });
  
  const { queryParams, form, rules } = toRefs(data);
  
  /** 查询期票承兑信息列表 */
  function getList() {
    loading.value = true;
    console.log(" daterangeAcceptTime.value = [];", daterangeAcceptTime.value);
    
    if (null != daterangeAcceptTime.value && "" != daterangeAcceptTime.value) {
        queryParams.value.beginAcceptTime = daterangeAcceptTime.value[0];
        queryParams.value.endAcceptTime = daterangeAcceptTime.value[1];
    }else{
        queryParams.value.beginAcceptTime = null
        queryParams.value.endAcceptTime = null
    }

    listPromissoryData(queryParams.value).then(response => {
      promissoryList.value = response.data;
      dataSize.value = response.data.length
      totalMoney.value = response.total
      loading.value = false;
    }).finally(() => {
        loading.value = false;
  });
  }


  function getSummaries(param) {
    const { columns, data } = param;
    const sums = [];
    columns.forEach((column, index) => {
        if (index === 0) {
            sums[index] = `合计（共 ${data.length} 条）`;
            return;
        }

        const prop = column.property;

        // 需要统计的列配置
        const statsColumns = {
            money: { name: '金额', format: 'money' },
        };

        if (statsColumns[prop]) {
            const values = data.map(item => Number(item[prop]));
            if (!values.every(value => isNaN(value))) {
                const sum = values.reduce((prev, curr) => {
                    const value = Number(curr);
                    return isNaN(value) ? prev : prev + value;
                }, 0);

                // 格式化输出
                switch (statsColumns[prop].format) {
                    case 'int':
                        sums[index] = Math.round(sum).toString(); // 四舍五入取整，转为字符串
                        break;
                    case 'money':
                        sums[index] = '￥ ' + sum.toFixed(2); // 四舍五入保留两位小数并添加货币符号
                        break;
                    default:
                        sums[index] = sum.toString();
                }
            } else {
                sums[index] = 'N/A';
            }
        } else {
            sums[index] = '';
        }
    });

    return sums;
}
  
  
  /** 搜索按钮操作 */
  function handleQuery() {
    getList();
  }
  
  /** 重置按钮操作 */
  function resetQuery() {
    proxy.resetForm("queryRef");
    handleQuery();
  }
  
  getList();
  </script>



<style scoped>
:global(h2#card-usage ~ .example .example-showcase) {
    background-color: var(--el-fill-color) !important;
}


.el-statistic {
    --el-statistic-content-font-size: 28px;
}

.statistic-card {
    height: 100%;
    padding: 20px;
    border-radius: 4px;
    background-color: var(--el-bg-color-overlay);
}

.statistic-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--el-text-color-regular);
    margin-top: 16px;
}

.statistic-footer .footer-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.statistic-footer .footer-item span:last-child {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}
</style>